<template>
  <div>
    <a-range-picker :format="format"
                    :valueFormat="valueFormat"
                    :mode="mode"
                    :placeholder="placeholder"
                    :disabled="disabled"
                    v-model.trim="value"
                    @change="onChange"
                    @panelChange="panelChange"
                    :show-time="showTime"
                    style="width:100%;" />
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {
    return {
      value: null
    }
  },
  props: {
    beginTime: {
      type: String,
      default: null
    },
    endTime: {
      type: String,
      default: null
    },
    placeholder: {
      default: () => ['开始日期', '结束日期']
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD HH:mm'
    },
    valueFormat: {
      type: String,
      default: 'YYYY-MM-DD HH:mm'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    mode: {
      default: () => (['date', 'date'])
    },
    showTime: {
      default: () => ({ format: 'HH:mm' })
    },
    isDate: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  watch: {
    beginTime: {
      handler (val, oldVal) {
        this.value = (this.beginTime && this.endTime) ? [this.beginTime, this.endTime] : null
      },
      immediate: true,
      deep: true
    },
    endTime: {
      handler (val, oldVal) {
        this.value = (this.beginTime && this.endTime) ? [this.beginTime, this.endTime] : null
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onChange (date, strings) {
      if (!date.length) {
        this.$emit('update:beginTime', undefined)
        this.$emit('update:endTime', undefined)
        return
      }
      if (this.isDate) {
        this.$emit('update:beginTime', date[0])
        this.$emit('update:endTime', date[1])
      } else {
        this.$emit('update:beginTime', strings[0])
        this.$emit('update:endTime', strings[1])
      }
    },
    panelChange (date) {
      this.$emit('panelChange', date)
    }
  },
  filters: {},
  created () { },
  mounted () { },
  beforeDestroy () { }
}
</script>

<style  scoped>
</style>
